
import { defineStore } from 'pinia'
import { RouteLocationNormalizedLoaded } from 'vue-router'
import { router} from '/@/router'

interface TabData {
  key: string,
  title: string,
  closable?: boolean
}
interface TabState {
  tabList: Array<TabData>
}
export const useTabStore = defineStore('app-tab', {
  // 推荐使用 完整类型推断的箭头函数
  state: (): TabState => {
    return {
      tabList: []
    }
  },
  actions: {
    /**
     * 添加标签
     * @param route 路则对象
     */
    addTab(route: RouteLocationNormalizedLoaded) {
      const index = this.tabList.findIndex(tab=>{
        return tab.key == route.path
      })
      const tabData: TabData = {
        key: route.path,
        title: route.meta?.title?.toString() || route.path,
        closable: route.meta?.affix !== true
      }
      if(index==-1) {
        // 不存在，则添加
        this.tabList.push(tabData)
      } else {
        // 更新数据
        this.tabList[index] = {
          ...this.tabList[index],
          ...tabData
        }
      }
    },
    /**
     * 通过标签key删除
     * @param key 
     */
    removeTab(key: string) {
      // 至少保留一个
      if(this.tabList.length<=1) return undefined;
      const index = this.tabList.findIndex(tab=>{
        return tab.key == key
      })
      if(index!=-1) {
        const oldLength = this.tabList.length
        this.tabList.splice(index,1)
        if(router.currentRoute.value.path == key) {
          if(index == oldLength-1) {
            // 如果删除的是最后一个，则跳转到上一个
            const tab = this.tabList[index-1]
            this.goToPage(tab.key)
          } else {
            // 否则，则跳转到下一个
            const tab = this.tabList[index]
            this.goToPage(tab.key)
          }
        }
      }
    },
    /**
     * 是否当前 
     * @param key 
     */
    isCurrent(key: string) {
      return router.currentRoute.value.path == key
    },
    /**
     * 根据key跳转
     * @param key 
     */
    goToPage(key: string) {
      router.push({
        path: key
      })
    },
    /**
     * 重新加载
     * @param tabData 
     * @param index 
     */
    reload(tabData: TabData,index: number) {
      router.go(0)
    },
    /**
     * 关闭当前标签
     * @param tabData 
     * @param index 
     */
    closeCurrent(tabData: TabData,index: number) {
      this.removeTab(tabData.key)
    },
    /**
     * 关闭左侧标签
     * @param tabData 
     * @param index 
     */
    closeLeft(tabData: TabData,index: number) {
      // 拿到左侧菜单
      const leftTab = this.tabList.slice(0,index)
      leftTab.forEach(item=>{
        // 只能关闭可关闭的标签
        if(item.closable) {
          this.removeTab(item.key)
        }
      })
    },
    /**
     * 关闭右侧标签
     * @param tabData 
     * @param index 
     */
    closeRight(tabData: TabData,index: number) {
      // 拿到右侧菜单
      const rightTab = this.tabList.slice(index+1,this.tabList.length)
      rightTab.forEach(item=>{
        // 只能关闭可关闭的标签
        if(item.closable) {
          this.removeTab(item.key)
        }
      })
    },
    /**
     * 关闭其他标签
     * @param tabData 
     * @param index 
     */
    closeOther(tabData: TabData,index: number) {
      const copyTab = this.tabList.slice(0, this.tabList.length)
      copyTab.forEach(item=>{
        if(item.closable && tabData.key != item.key) {
          this.removeTab(item.key)
        }
      })
    },
    /**
     * 关闭所有标签
     * @param tabData 
     * @param index 
     */
    closeAll(tabData: TabData,index: number) {
      // 先关闭其他
      this.closeOther(tabData,index)
      // 再关闭当前
      this.closeCurrent(tabData,index)
    }
  },
  getters: {
    getTabs(): Array<TabData> {
      return this.tabList
    }
  },
  persist: {
    storage: localStorage,
    key: "app-tab"
  }
})